<!-- 远程控制中心 -->
<template>
  <div class="app-container no-padding remote-container">
    <div id="map"/>
    <div class="bgLeft"/>
    <div class="bgRight"/>
    <div class="bgTop"/>
    <div class="bgBottom"/>
    <div v-if="showModel" :style="{backgroundImage: 'url('+ dialog +')'}" class="dialog-img">
      <p class="dialog-title">{{ dialogData.title_name }}</p>
      <ul>
        <li><span class="left">{{ dialogData.park_name }}</span><span class="right">{{ dialogData.building_name }}</span></li>
        <li><span class="left">{{ dialogData.loop }}</span><span class="right">{{ dialogData.position ? dialogData.position : '' }}</span></li>
      </ul>
      <div class="date">{{ dialogData.date }}</div>
      <span class="close el-icon-close" @click="closeDialog"/>
    </div>
    <!-- 左侧内容 -->
    <div class="left-content">
      <!-- 左侧 logo -->
      <div class="top-left"><img :src="logo" class="logo-img"><span>上海励尔信息科技有限公司</span></div>
      <div class="company-info">
        <p class="title">单位信息</p>
        <ul class="first">
          <li>单位名称：{{ corpInfo.name }}</li>
          <li>地址：{{ corpInfo.address }}</li>
          <li>联系电话：{{ corpInfo.link_user_mobile }}</li>
        </ul>
        <ul>
          <li>联系人：{{ corpInfo.link_user }}</li>
          <li>建筑数：{{ corpInfo.building_number }}</li>
          <li>分区数：{{ corpInfo.fire_zone }}</li>
        </ul>
      </div>
      <!-- <div v-if="!isMiddle" class="score">
        <p class="title">综合评分</p>
        <ul>
          <li>
            <div id="securityChart" class="chart"/>
            <div class="chart-text"><span class="name">安全</span><span class="num">{{ securityNum }}<i>分</i></span></div>
          </li>
          <li>
            <div id="peerRatioChart" class="chart"/>
            <div class="chart-text"><span class="name">超越同行</span><span class="num">{{ peerRatioNum }}<i>%</i></span></div>
          </li>
        </ul>
      </div> -->
    </div>
    <div class="score middle-score">
      <p class="title">综合评分</p>
      <ul>
        <li>
          <div id="securityChart" class="chart"/>
          <div class="chart-text"><span class="name">安全</span><span class="num">{{ securityNum }}<i>分</i></span></div>
        </li>
        <li>
          <div id="peerRatioChart" class="chart"/>
          <div class="chart-text"><span class="name">超越同行</span><span class="num">{{ peerRatioNum }}<i>%</i></span></div>
        </li>
      </ul>
    </div>
    <div class="event-center event-center1">
      <p class="title" style="margin: 0;margin-bottom: 16px;">事件中心</p>
      <div class="list-info">
        <ul class="list-title"><li>设备名称</li><li>位置</li><li>时间</li><li>处理状态</li></ul>
        <div class="data_list">
          <ul v-for="item in eventCenterList" :key="item.key" :class="item.class"><li :title="item.equipmentName">{{ item.equipmentName }} <img :src="item.icon"></li><li :title="item.loop">{{ item.loop }}</li><li :title="item.date">{{ item.date }}</li><li :title="item.status">{{ item.status }}</li></ul>
        </div>
      </div>
    </div>
    <div class="night-self night-self1">
      <p class="title">实时巡更</p>
      <div class="list-info">
        <ul class="list-title"><li>计划名称</li><li>点位</li><li>执行人</li><li>时间</li></ul>
        <div class="data_list">
          <ul v-for="item in nightSelfList" :key="item.key"><li :title="item.plan_name">{{ item.plan_name }} <img :src="item.icon"></li><li :title="item.position">{{ item.position }}</li><li :title="item.worker">{{ item.worker }}</li><li :title="item.date">{{ item.date }}</li></ul>
        </div>
      </div>
    </div>
    <!-- 设备联网率 -->
    <div class="dangerEquipment">
      <div id="dangerEquipment"/>
    </div>
    <div class="dengerEvent">
      <p class="title">火警、故障点位</p>
      <div id="dengerEvent"/>
    </div>
    <div class="inspectPatrol">
      <p class="title">巡更时长</p>
      <!-- <span class="date">30天</span> -->
      <div id="inspectPatrol"/>
    </div>
    <div class="top-right">
      <!-- <div id="weather"><img :src="weatherData.weatherImg" class="weather-icon"><span>{{ weatherData.temperature }}度</span><span>{{ weatherData.weather }}</span><span>{{ weatherData.windDirection }}风 {{ weatherData.windPower }}级</span></div> -->
      <div id="weather">
        <iframe id="weatherIframe" scrolling="no" src="https://tianqiapi.com/api.php?style=tz&skin=pitaya&appid=94798341&appsecret=1jNVOgNb&vue=1&color=b6b8bf&align=right&paddingtop=2" frameborder="0" height="20" allowtransparency="true"/>
      </div><div id="currentTime" class="dateStr"/>
      <div id="currentDate" class="dateStr"/>
    </div>
  </div>
</template>
<script>
import logo from '@/assets/logo_white.png'
import dialog from '@/assets/remoteControlCenter/dialog.png'
import listDanger from '@/assets/remoteControlCenter/list-danger.png'
import listPosition from '@/assets/remoteControlCenter/list-position.png'
import listShield from '@/assets/remoteControlCenter/list-shield.png'
import listWarning from '@/assets/remoteControlCenter/list-warning.png'
import markerImg from '@/assets/remoteControlCenter/marker.png'
import markerImg2 from '@/assets/remoteControlCenter/marker2.png'
import markerImg3 from '@/assets/remoteControlCenter/marker3.png'
import titleIcon1 from '@/assets/remoteControlCenter/title-icon1.png'
import titleIcon2 from '@/assets/remoteControlCenter/title-icon2.png'
import user from '@/assets/remoteControlCenter/user.png'
import weatherCloudy from '@/assets/remoteControlCenter/weatherCloudy.png'
import weatherFine from '@/assets/remoteControlCenter/weatherFine.png'
import weatherHaze from '@/assets/remoteControlCenter/weatherHaze.png'
import weatherOvercast from '@/assets/remoteControlCenter/weatherOvercast.png'
import weatherRain from '@/assets/remoteControlCenter/weatherRain.png'
import weatherSnow from '@/assets/remoteControlCenter/weatherSnow.png'
import weatherUnknown from '@/assets/remoteControlCenter/weatherUnknown.png'
import AMap from 'AMap'
import { parseTime } from '@/utils/index'
import echarts from 'echarts'
import 'echarts-liquidfill'
import $ from 'jquery'
import { fireAlarm, scoreControl, corpInfo, patrol, iot, buildingList } from '@/api/controlManage'
export default {
  name: 'Order',
  data() {
    return {
      weatherCloudy,
      weatherFine,
      weatherHaze,
      weatherOvercast,
      weatherRain,
      weatherSnow,
      weatherUnknown,
      logo,
      dialog,
      listDanger,
      listPosition,
      listShield,
      listWarning,
      markerImg,
      markerImg2,
      markerImg3,
      titleIcon1,
      titleIcon2,
      user,
      showModel: false,
      dialogData: {},
      corpInfo: {
        address: '',
        building: '',
        fire_zone: '',
        link_user: '',
        link_user_mobile: '',
        name: '',
        iot: ''
      },
      securityNum: 0,
      peerRatioNum: 0,
      markers: [],
      isMiddle: false,
      // {
      //   class: '',
      //   icon: listDanger,
      //   equipmentName: '上海励尔信息科技有限公司',
      //   position: '地上',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: '',
      //   icon: listShield,
      //   equipmentName: '上海励尔信息科技有限公司',
      //   position: '地上',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: '',
      //   icon: listWarning,
      //   equipmentName: '上海励尔信息科技有限公司',
      //   position: '地上',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: '',
      //   icon: listShield,
      //   equipmentName: '上海励尔信息科技有限公司',
      //   position: '地上',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: 'noBorder',
      //   icon: listWarning,
      //   equipmentName: '上海励尔信息科技有限公司',
      //   position: '地上',
      //   date: '2020-01-18 15:00:22'
      // }
      mapBuildList: [],
      eventCenterList: [],
      nightSelfList: [],
      map: null,
      scrollEvent: null,
      scrollNight: null
      // {
      //   class: '',
      //   icon: listPosition,
      //   planName: '上海励尔信息科技有限公司',
      //   pointNum: '5',
      //   executorName: '李小二',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: '',
      //   icon: listPosition,
      //   planName: '上海励尔信息科技有限公司',
      //   pointNum: '5',
      //   executorName: '李小二',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: '',
      //   icon: listPosition,
      //   planName: '上海励尔信息科技有限公司',
      //   pointNum: '5',
      //   executorName: '李小二',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: '',
      //   icon: listPosition,
      //   planName: '上海励尔信息科技有限公司',
      //   pointNum: '5',
      //   executorName: '李小二',
      //   date: '2020-01-18 15:00:22'
      // }, {
      //   class: 'noBorder',
      //   icon: listPosition,
      //   planName: '上海励尔信息科技有限公司',
      //   pointNum: '5',
      //   executorName: '李小二',
      //   date: '2020-01-18 15:00:22'
      // }
    }
  },
  watch: {
    nightSelfList(val) {
      if (val.length > 5 && !this.scrollNight) {
        this.scrollNightFn()
      }
    },
    eventCenterList(val) {
      if (val.length > 5 && !this.scrollEvent) {
        this.scrollEventFn()
      }
    }
  },
  created() {
    // $('.navbar').fadeOut()
    // $('.sidebar-container').fadeOut()
    // $('.main-container').css('margin', 0)
    // $('.logo').fadeOut()
    this.$nextTick(function() {
      window.onresize = function() {
        var height = $('.left-content').height() + 580
        var mHeight = $(document).height()
        if (mHeight > height) {
          $('#map').height(mHeight)
          this.isMiddle = true
        } else {
          $('#map').height(height)
          this.isMiddle = false
        }
      }
      var height = $('.left-content').height() + 580
      var mHeight = $(document).height()
      if (mHeight > height) {
        $('#map').height(mHeight)
        this.isMiddle = true
      } else {
        $('#map').height(height)
        this.isMiddle = false
      }
      // 隐藏顶部内容、左侧菜单
      $('.navbar').fadeOut()
      $('.sidebar-container').fadeOut()
      $('.main-container').css('margin', 0)
      $('.logo').fadeOut()
      // 实例化 安全评分
      this.securityChart = echarts.init(document.getElementById('securityChart'))
      // 实例化 同行占比
      this.peerRatioChart = echarts.init(document.getElementById('peerRatioChart'))
      // 实例化 设备联网率
      this.dangerEquipment = echarts.init(document.getElementById('dangerEquipment'))
      // 实例化 火警故障点位
      this.dengerEvent = echarts.init(document.getElementById('dengerEvent'))
      // 实例化 巡更时长
      this.inspectPatrol = echarts.init(document.getElementById('inspectPatrol'))
      // 实例化 地图
      this.map = new AMap.Map('map', {
        zoom: 17,
        showLabel: true,
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        pitch: 55,
        rotation: 0,
        viewMode: '3D', // 开启3D视图,默认为关闭
        buildingAnimation: true, // 楼块出现是否带动画
        expandZoomRange: true,
        zooms: [3, 24],
        forceVector: true,
        mapStyle: 'amap://styles/c2d238d46afa93049b7c3ca434a374d8'//  设置地图的显示样式
      })
      // 初始化数据
      this.init()
      // 右上角时间
      this.writeCurrentDate()
      // 初始化WebSocket发起请求建立连接
      this.initWebSocket()
    })
  },
  destroyed() {
    this.websock.close() // 离开路由之后断开websocket连接
    clearInterval(this.scrollNight)
    this.scrollNight = null
    clearInterval(this.scrollEvent)
    this.scrollEvent = null
  },
  methods: {
    closeDialog() {
      this.showModel = false
    },
    // 轮播巡更
    scrollNightFn() {
      const that = this
      var deleteData
      this.scrollNight = setInterval(function() {
        $('.night-self .data_list').stop().animate({ 'top': '6px' }, function() {
          $('.night-self .data_list').css({ top: '36px' })
          deleteData = that.nightSelfList.shift()
          that.nightSelfList.push(deleteData)
        })
      }, 2000)
    },
    // 轮播事件
    scrollEventFn() {
      const that = this
      var deleteData
      this.scrollEvent = setInterval(function() {
        $('.event-center .data_list').stop().animate({ 'top': '6px' }, function() {
          $('.event-center .data_list').css({ top: '36px' })
          deleteData = that.eventCenterList.shift()
          that.eventCenterList.push(deleteData)
        })
      }, 2000)
    },
    initWebSocket() { // 初始化weosocket
      if (typeof (WebSocket) === 'undefined') {
        this.$message.warning('您的浏览器不支持socket，请更换浏览器后重试')
      } else {
        var token = localStorage.getItem('token')
        const wsuri = process.env.WEBSOCKET_SERVER + '?token=' + token
        this.websock = new WebSocket(wsuri)
        this.websock.onmessage = this.websocketonmessage
        this.websock.onopen = this.websocketonopen
        this.websock.onerror = this.websocketonerror
        this.websock.onclose = this.websocketclose
      }
    },
    websocketonopen() { // 连接建立之后执行send方法发送数据
      if (this.websock.readyState) {
        console.log('建立连接')
      }
      console.log('readyState:' + this.websock.readyState)
    },
    websocketonerror(e) { // 连接建立失败重连
      console.log('WebSocket连接发生错误' + e)
      this.initWebSocket()
    },
    websocketonmessage(e) { // 数据接收task_start_at
      console.log('数据接收')
      console.log(e.data)
      const that = this
      const data = JSON.parse(e.data)
      // push_type:
      // 1 火警/故障/屏蔽 事件
      // 2 处理 火警/故障/屏蔽
      // 3 巡更
      // 4 建筑火警/故障数量
      // 有设备名称 事件中心 火警/故障/屏蔽 事件
      if (data.push_type === 1) {
        // 表格处理
        data.class = ''
        data.icon = data.task_type === 1 ? listDanger : data.task_type === 2 ? listWarning : data.task_type === 3 ? listShield : ''
        data.equipmentName = data.mname
        data.status = data.status === 7 ? '未处理' : '已处理'
        data.date = data.task_start_at ? parseTime(data.task_start_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
        data.title_name = data.task_type === 1 ? '实时火警' : data.task_type === 2 ? '实时故障' : data.task_type === 3 ? '实时屏蔽' : '实时报警'
        that.eventCenterList.push(data)
        that.dialogData = data
        that.showModel = true
      // 处理 火警/故障/屏蔽
      } else if (data.push_type === 2) {
        that.eventCenterList.forEach(item => {
          if (item.task_id === data.task_id) {
            item.status = data.status === 7 ? '未处理' : '已处理'
          }
        })
      // 巡更
      } else if (data.push_type === 3) {
        data.icon = listPosition
        data.date = data.task_start_at ? parseTime(data.task_start_at * 1000, '{y}-{m}-{d} {h}:{i}:{s}') : ''
        that.nightSelfList.push(data)
      // 建筑火警/故障数量
      } else if (data.push_type === 4) {
        // 地图上所有的建筑标注点，修改所对应的报警、故障数量
        var newArr = []
        that.markers.forEach((it, index) => {
          data.buildingList.forEach(item => {
            if (item.building_id === it.Ce.id) {
              that.markers[index].setMap(null)
              that.markers.splice(index, 1)
              newArr.push(that.getMarker(item))
            }
          })
        })
        that.map.add(newArr)
        that.markers = that.markers.concat(newArr)
      }
    },
    websocketsend(agentData) { // 数据发送
      console.log('数据发送')
      // this.websock.send({'name': '测试'});
    },
    websocketclose(e) { // 关闭
      console.log('断开连接', e)
    },
    init() {
      const that = this
      // 地图默认标注点
      buildingList()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.mapBuildList = data.data
            that.map.setCenter([parseFloat(data.data[0].longitude), parseFloat(data.data[0].latitude)])
            that.markers = []
            that.mapBuildList.forEach((item, index) => {
              if (item.longitude && item.latitude) {
                item.longitude = parseFloat(item.longitude)
                item.latitude = parseFloat(item.latitude)
                that.markers.push(that.getMarker(item))
              }
            })
            that.map.add(that.markers)
          }
        })
        .catch((e) => {
          console.log(e)
        })
      // 单位信息
      corpInfo()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            // console.log(data)
            that.corpInfo = data.data
            that.corpInfo.iot = that.corpInfo.iot.length === 0 ? '暂无系统接入' : that.corpInfo.iot.join(',')
          }
        })
        .catch((e) => {
          console.log(e)
        })
      // 右下角的设备联网率
      iot()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            // console.log(data)
            const XData = []
            data.data.forEach(item => {
              XData.push(item.name)
            })
            var s = $('#dangerEquipment').width() > 400 ? 13 : 10
            this.dangerEquipment.setOption({
              title: {
                text: '设备联网率',
                left: 'left',
                padding: 15,
                textStyle: {
                  fontSize: 18,
                  color: '#fff',
                  fontWeight: 500
                }
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              grid: {
                left: '0px',
                right: '0px',
                containLabel: true
              },
              legend: {
                type: 'scroll',
                orient: 'vertical',
                top: 40,
                right: 0,
                icon: 'circle',
                textStyle: {
                  color: '#fff',
                  fontSize: s
                },
                data: XData
              },
              series: [{
                name: '设备联网率',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['30%', '60%'],
                data: data.data,
                left: 0,
                right: 0,
                color: ['#fea763', '#28abff', '#6416cf', '#084cf7', '#eb47a0'],
                label: {
                  show: true,
                  formatter: '{d}%'
                },
                labelLine: {
                  length: 5,
                  length2: 5
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })
      // 评分
      scoreControl()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            const score = data.data.score && data.data.score !== 0 ? data.data.score / 100 : 0
            const sort = data.data.sort === '0.00%' ? 0 : data.data.sort.substr(0, data.data.sort.length - 1)
            const sortNum = sort === 0 ? 0 : parseFloat(sort / 100).toFixed(2)
            that.peerRatioNum = parseFloat(sort).toFixed(2)
            that.securityNum = parseFloat(score * 100).toFixed(0)
            that.securityChart.setOption({
              series: [{
                name: '',
                type: 'liquidFill',
                data: [{
                  value: score,
                  direction: 'left',
                  amplitude: '8%',
                  waveLength: '80%',
                  itemStyle: {
                    color: '#213d78'
                  }
                },
                {
                  value: score - 0.06,
                  direction: 'left',
                  amplitude: '8%',
                  waveLength: '80%',
                  itemStyle: {
                    color: '#1351c1'
                  }
                }],
                radius: '100%',
                center: ['50%', '50%'],
                outline: {
                  show: false
                },
                label: {
                  show: false
                },
                backgroundStyle: {
                  borderWidth: 0,
                  borderColor: 'red',
                  color: '#2a3046'
                }
              }]
            })
            this.peerRatioChart.setOption({
              series: [{
                name: '',
                type: 'liquidFill',
                data: [{
                  value: sortNum,
                  direction: 'left',
                  amplitude: '8%',
                  waveLength: '80%',
                  itemStyle: {
                    color: '#236a82'
                  }
                },
                {
                  value: sortNum - 0.06,
                  direction: 'left',
                  amplitude: '8%',
                  waveLength: '80%',
                  itemStyle: {
                    color: '#1ab0c9'
                  }
                }],
                radius: '100%',
                center: ['50%', '50%'],
                outline: {
                  show: false
                },
                label: {
                  show: false
                },
                backgroundStyle: {
                  borderWidth: 0,
                  borderColor: 'red',
                  color: '#2a3046'
                }
              }]
            })
            // console.log(data)
          }
        })
        .catch((e) => {
          console.log(e)
        })
      // 巡更时长
      patrol()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.inspectPatrol.setOption({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'none',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              grid: {
                left: '16px',
                right: '0px',
                bottom: '14%',
                top: '4%',
                containLabel: true
              },
              dataZoom: [{
                type: 'inside'
              }],
              xAxis: {
                type: 'category',
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#fff'
                  }
                },
                data: data.data.keys
              },
              yAxis: {
                type: 'value',
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#fff'
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                }
              },
              // color: ['#e33aa3', '#439aff'],
              color: ['#439aff'],
              series: [{
                // name: '事件数',
                data: data.data.values,
                type: 'line',
                smooth: true
              }]
            })
            // console.log(data)
          }
        })
        .catch((e) => {
          console.log(e)
        })
      // 火警。故障点位
      fireAlarm()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.dengerEvent.setOption({
              color: ['#3398DB'],
              tooltip: {
                trigger: 'item',
                show: true,
                formatter: '{b}<br />{a}: {c}次'
              },
              grid: {
                left: '16px',
                right: '0%',
                bottom: '2%',
                top: '16%',
                containLabel: true
              },
              xAxis: [{
                type: 'category',
                data: data.data.keys,
                axisLabel: {
                  textStyle: { // 改变刻度字体样式
                    color: '#fff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#4398FB'
                  }
                },
                splitLine: {
                  show: false
                }
              }],
              yAxis: [{
                type: 'value',
                name: '事件数/天',
                nameTextStyle: {
                  color: '#fff'
                },
                axisLabel: {
                  textStyle: { // 改变刻度字体样式
                    color: '#fff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#4398FB'
                  }
                },
                splitLine: {
                  show: false
                }
              }],
              dataZoom: [{
                type: 'inside'
              }],
              series: [{
                name: '火警',
                type: 'bar',
                barWidth: '20',
                itemStyle: {
                  normal: {
                    color: '#28B1FF'
                  },
                  emphasis: {
                    color: 'rgba(38,193,201,1)'
                  }
                },
                data: data.data.fireAlarm
              }, {
                name: '故障',
                type: 'bar',
                barWidth: '20',
                itemStyle: {
                  normal: {
                    color: '#E93EA6'
                  },
                  emphasis: {
                    color: 'rgba(38,193,201,1)'
                  }
                },
                data: data.data.firePoint
              }]
            })
            // console.log(data)
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    writeCurrentDate() {
      var now = new Date()
      var year = now.getFullYear() // 得到年份
      var month = now.getMonth() // 得到月份
      var date = now.getDate() // 得到日期
      var hour = now.getHours() // 得到小时
      var minu = now.getMinutes() // 得到分钟
      var sec = now.getSeconds() // 得到秒
      var MS = now.getMilliseconds() // 获取毫秒
      month = month + 1
      if (month < 10) {
        month = '0' + month
      }
      if (date < 10) {
        date = '0' + date
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minu < 10) {
        minu = '0' + minu
      }
      if (sec < 10) {
        sec = '0' + sec
      }
      if (MS < 100) {
        MS = '0' + MS
      }
      var dateStr = year + '/' + month + '/' + date
      var time = hour + ':' + minu + ':' + sec
      // 当前日期赋值给当前日期输入框中（jQuery easyUI）
      $('#currentDate').html(dateStr)
      $('#currentTime').html(time)
      // 设置得到当前日期的函数的执行间隔时间，每1000毫秒刷新一次。
      setTimeout(this.writeCurrentDate, 1000)
    },
    // 生成点位
    getMarker(data) {
      const that = this
      var zoomStyleMapping = {
        5: 11,
        6: 11,
        7: 11,
        8: 11,
        9: 11,
        10: 10,
        11: 9,
        12: 8,
        13: 7,
        14: 6,
        15: 5,
        16: 4,
        17: 3,
        18: 2,
        19: 1,
        20: 0
      }
      // 火警数量是0 故障大于0显示黄色剩下都是蓝色
      var img = data.fireNumber > 0 ? markerImg2 : data.faultNumber > 0 ? markerImg : markerImg3
      var color = data.fireNumber > 0 ? 'style1' : data.faultNumber > 0 ? 'style2' : 'style3'
      var content = '<div class="markerImgStyle2 ' + color + '"><div class="text"><span>' + data.park_name + data.name + '</span><img src="' + titleIcon1 + '" class="icon"><span class="h">' + data.fireNumber + '</span><img src="' + titleIcon2 + '" class="icon"><span class="p">' + data.faultNumber + '</span></div></div>'
      var m = new AMap.ElasticMarker({
        // map: that.map,
        position: new AMap.LngLat(data.longitude, data.latitude),
        zooms: [4, 20],
        cursor: 'pointer',
        id: data.building_id,
        styles: [{
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 20,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 19,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 18,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 17,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 16,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 15,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 14,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 13,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 12,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 11,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 10,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }, {
          icon: {
            img: img,
            size: [86, 102],
            ancher: [43, 82],
            imageSize: [86, 102],
            fitZoom: 9,
            maxScale: 100,
            minScale: 0.125
          },
          label: {
            content: content,
            position: 'TM'
          }
        }],
        zoomStyleMapping: zoomStyleMapping
      })
      m.on('click', item => {
        that.map.setCenter([item.lnglat.lng, item.lnglat.lat])
        that.map.setZoom(10)
      })
      return m
    }
  }
}
</script>
<!-- statistics.scss -->
